import React, { Component } from 'react';
import { Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_member_info_companyRealname, api_member_redpack_sendredpack } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ChooseSingleImageItem, ChooseSingleImageAndEditItem } from '../components/Item';
import { LoadingAndPorgressModal, BottomPayModal } from '../components/Modal';
import { uploadFile } from '../constants/UpLoadHelper';
import { ExamineView } from '../components/EmptyView';
import { wxPay } from '../constants/Pay';
import { contactBrowser } from '../constants/Gobrowser';
import CommonUtil from '../constants/CommonUtil';

export default class SendRedEnvelopesScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.state = {
            title: '',//红包标题
            sum: '',//红包金额
            num: '',//红包数量
            limit: '10天',//红包期限
            range: CommonUtil.checkText(global.locationInfo.province) + '  ' + CommonUtil.checkText(global.locationInfo.city) + '  ' + CommonUtil.checkText(global.locationInfo.area),//区域范围

            imgUrl: '',

            ImageList: [],
            progress: '0%',
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    };

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='发红包' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View>
                        <ChooseSingleImageAndEditItem
                            title='红包标题：'
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    ImageList: selectedPhotos,
                                })
                            }}
                            maxLength={20}
                            onChangeText={this.onTitleTextChange.bind(this)}
                            placeholder='请输入红包标题'
                            value={this.state.title} isLast={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onSumTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 17 }}>金额：</Text>
                            }
                            filterType={6}
                            maxLength={20}
                            keyboardType='numeric'
                            placeholder='请输入红包总金额'
                            value={this.state.sum} isLast={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onNumTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 17 }}>数量：</Text>
                            }
                            filterType={1}
                            maxLength={10}
                            keyboardType='numeric'
                            placeholder='请输入红包数量'
                            value={this.state.num} isLast={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={(text) => {
                                // this.setState({
                                //     limit: text
                                // })
                            }}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 17 }}>红包期限：</Text>
                            }
                            maxLength={50}
                            // filterType={1}
                            placeholder='输入红包期限'
                            value={this.state.limit} isLast={false} editable={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={() => { }}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 17 }}>区域范围：</Text>
                            }
                            maxLength={50}
                            placeholder=''
                            value={this.state.range} isLast={true} editable={false} />
                        <SubmitButton1 style={{ marginVertical: 38 * unitWidth, alignSelf: 'center' }} text='塞钱进红包' onPress={() => {
                            this.doUpload();
                        }} />
                    </View>
                </ScrollView>
                <BottomPayModal ref='BottomPayModal' onClick={(index) => {
                    this.submit(index)
                }} />
                <LoadingAndPorgressModal ref='LoadingAndPorgressModal' progress={this.state.progress} />
            </View>
        );
    }

    onTitleTextChange(text) {
        this.setState({
            title: text
        })
    }

    onSumTextChange(text) {
        this.setState({
            sum: text,
        })
    }

    onNumTextChange(text) {
        this.setState({
            num: text
        })
    }

    doUpload() {
        if (this.state.title == '') {
            show('请输入红包标题');
            return;
        } else if (this.state.ImageList.length == 0) {
            show('请选择广告图片');
            return;
        } else if (this.state.sum == '') {
            show('请输入红包金额');
            return;
        } else if (this.state.num == '') {
            show('请输入红包数量');
            return;
        }
        if (this.state.ImageList && this.state.ImageList.length > 0) {
            this.refs.LoadingAndPorgressModal.showModal();
            uploadFile(this.state.ImageList, (text) => {
                this.setState({
                    progress: text
                })
            }, {
                success: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    this.setState({
                        imgUrl: response.files[0].url
                    }, () => {
                        this.refs.BottomPayModal.showModal()
                    })
                },
                fail: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    show('上传失败')
                }
            })
        } else {
            show('请选择营业执照');
            return;
        }
    }

    //支付订单
    submit(paytype) {
        let params = {
            title: this.state.title,
            adv_url: this.state.imgUrl,
            money: this.state.sum,
            total: this.state.num,
            effective_day: '10',
            province: global.locationInfo.province,
            city: global.locationInfo.city,
            area: global.locationInfo.area,
        }
        if (paytype == 1) {
            params['paytype'] = '2'
        } else if (paytype == 2) {
            params['paytype'] = '3'
        } else if (paytype == 3) {
            params['paytype'] = '1'
        }
        postFetch(api_member_redpack_sendredpack, params, {
            success: (response) => {
                if (paytype == 1) {
                    wxPay(response.result, {
                        success: () => {
                            show('支付成功');
                            this.props.navigation.pop();
                        },
                        fail: () => {

                        }
                    })
                } else if (paytype == 2) {
                    contactBrowser(response.result.url)
                } else if (paytype == 3) {
                    show('支付成功');
                    this.props.navigation.pop();
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}